<template>
  <div class="app-header-user">
    <a-dropdown overlayClassName="dropdown-action-list">
      <div class="userinfo">
        <a-avatar :src="user.avatar" />
        <span>{{ user.name || $t('components.appuser.info') }}</span>
      </div>
      <template #overlay>
        <a-menu>
          <a-menu-item key="0" @click="logout" style="text-align: center">
            <span>
              <i></i>
            </span>
            <span>{{ $t('components.appuser.logout') }}</span>
          </a-menu-item>
        </a-menu>
      </template>
    </a-dropdown>
  </div>
</template>
<script lang = 'ts'>
import { Vue, Component } from "vue-property-decorator";
import { getCookie } from "@/utils/util";
import { ApiService } from "@/api";
import { MicroActionService } from "@/service/micro-action-service";
@Component({})
export default class AppUser extends Vue {
  /**
   * 用户信息
   *
   * @memberof AppUser
   */
  public user = {
    name: "",
    avatar: require("@/assets/avatar.png"),
  };

  /**
   * vue  生命周期
   *
   * @memberof AppUser
   */
  public mounted() {
    let _user: any = {};
    if (getCookie("loginname")) {
      _user.name = getCookie("loginname");
    }
    Object.assign(this.user, _user, {
      time: +new Date(),
    });
  }

  /**
   * 退出登录
   *
   * @memberof AppUser
   */
  public async logout() {
    const res:any = await ApiService.getInstance().Logout();
    if (res && res.status === 200) {
      MicroActionService.getInstance().handleLogout();
    }
  }

}
</script>

<style lang="less">
@import "./app-user.less";
</style>